<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="css/slider.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/sliderlittel.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 外层画布 -->
	<div id="canvas"></div>
	<div id="bottom">
		<div class="button"></div>
		<div class="little" id="little"></div>
	</div>
	<script type="text/javascript">
		//所有的数据
		var list = [{
			height: 1333,
			width: 750,
			img: "images/1.1.jpg"
		},
		{
			height: 1333,
			width: 750,
			img: "images/2.2.jpg"
		},
		{
			height: 1333,
			width: 750,
			img: "images/3.3.jpg"
		},
		{
			height: 1333,
			width: 750,
			img: "images/4.4.jpg"
		},{
			height: 1333,
			width: 750,
			img: "images/2.2.jpg"
		},{
			height: 1333,
			width: 750,
			img: "images/1.jpg"
		},
		{
			height: 1333,
			width: 750,
			img: "images/2.jpg"
		},
		{
			height: 1333,
			width: 750,
			img: "images/3.jpg"
		},
		{
			height: 1333,
			width: 750,
			img: "images/4.jpg"
		}];

		//初始化Slider 实例
		var slider=new Slider({
			dom : document.getElementById('canvas'),
			list : list
		});
		//初始化底部小幻灯片SliderLitter 实例
		var sliderLittle=new SliderLittle({
			dom : document.getElementById('little'),
			list : list,
			height:130
		});
		function open(){
			if(sliderLittle.isRuning){
				sliderLittle.stop();	
			}else{
				
			}
			
		}
	</script>
	
</body>